<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>根据起点终点规划路径</title>
		<link rel="stylesheet" href="lib/bootstrap.min.css">
		<link href=" css/style.css" rel="stylesheet">
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="fengMap"></div>

		<div class="btn btn-default navigation" style="position: absolute;left: 10px;top: 50px;height: 34px;z-index: 10000;" id="cancel">取消导航</div>
		<!--操作按钮-->
		<button class="btn btn-default navigation" id="navigation" style="position: absolute;left: 10px;top: 10px;height: 34px;z-index: 10000;">开始导航</button>
		<!--信息提示-->
		<div id="message" class="alert alert-warning hidden">
			<a href="#" class="close" data-dismiss="alert">&times;</a>
			<strong>警告！</strong>起点和终点不能在同一个模型上。
		</div>
		<script src="lib/jquery-2.1.4.min.js"></script>
		<script src="lib/fengmap.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<script>
			//获取版本号,设置title
			document.title = '根据起点终点规划路径V' + fengmap.VERSION;

			//定义全局map变量
			var map;
			var fmapID = 'location-test';
			// 导航对象
			var navi = null;
			//获取真实路径坐标点
			var group1coords = []; //一楼坐标点信息

			//如：定位坐标返回的坐标点
			var coordsData = [{
					x: 13028218.4785,
					y: 4737030.7298,
					groupID: 1
				},
				{
					x: 13028228.4785,
					y: 4737029.7298,
					groupID: 1
				},
				{
					x: 13028218.4785,
					y: 4737028.7298,
					groupID: 1
				},
				{
					x: 13028218.4785,
					y: 4737011.7298,
					groupID: 1
				},
				{
					x: 13028228.4785,
					y: 4737029.7298,
					groupID: 1
				},
				{
					x: 13028218.4785,
					y: 4737009.7298,
					groupID: 1
				}
			];
			
			//坐标点下标
			var coordIndex = 0;
			//起点终点坐标
			var points = [{
					x: 13028218.4785,
					y: 4737039.7298,
					groupID: 1
				},
				{
					x: 13028218.4785,
					y: 4737009.7298,
					groupID: 1
				}
			];
			var locationMarker;
			var others = true;

			window.onload = function() {
				var mapCoord = {
					x: 13028218.4785,
					y: 4737030.7298,
					groupID: 1
				}; // websocket传过来的坐标信息，经过转换的可直接在地图上显示。
				map = new fengmap.FMMap({
					//渲染dom
					container: document.getElementById('fengMap'),
					//地图数据位置
					mapServerURL: './data/' + fmapID,
					//主题数据位置
					mapThemeURL: 'data/theme',
					//初始二维还是三维状态，三维状态为MODE_3D
					defaultViewMode: fengmap.FMViewMode.MODE_2D,
					//设置主题
					defaultThemeName: '2001',
					// 默认比例尺级别设置为20级
					defaultMapScaleLevel: 22,
					//开发者申请应用下web服务的key
					key: '670072019dff394f3f991e88e98024d5',
					//开发者申请应用名称
					appName: 'innerMap',
				});

				//打开Fengmap服务器的地图数据和主题
				map.openMapById(fmapID);

				//地图加载完成回调
				map.on('loadComplete', function() {
					//初始化导航对象
					navi = new fengmap.FMNavigation({
						map: map,
						// 设置导航线的样式
						lineStyle: {
							//设置线为导航线样式
							lineType: fengmap.FMLineType.FMARROW,
							lineWidth: 6,
						}
					});
					//添加定位图标
					addlocationMarker(points[0]);
					// 设置导航事件
					navi.on('walking', function(data) {
						console.log('data', data)
						//设置定位图标的旋转角度
						setLocationMakerPosition(data.point, data.angle);
					});

				});
				//设置图片标注点位置信息
				function setLocationMakerPosition(coord, angle) {
					var data = {
						//设置定位点的x坐标
						x: coord.x,
						//设置定位点的y坐标
						y: coord.y,
						//设置定位点所在楼层
						groupID: coord.groupID,
						time: .50,
						callback: function() {
							//回调函数
						},
						zOffset: 1
					};
					//设置定位图标旋转角度
					if(angle) {
						locationMarker.rotateTo(-angle);
						if(others) {
							map.rotateTo({
								to: angle,
								time: 1
							});
						}
					}
					//不同楼层
					if(lastGid !== coord.groupID) {
						lastGid = coord.groupID;
						locationMarker.setPosition(data);
					}
					locationMarker.moveTo(data);
					map.moveTo({
						x: coord.x,
						y: coord.y,
						groupID: coord.groupID,
						time: 1
					});
				}

				//添加定位点图层
				function addlocationMarker(coord) {
					locationMarker = new fengmap.FMLocationMarker({
						//设置图片的路径
						url: 'image/pointer.png',
						//设置图片显示尺寸
						size: 46,
						//设置图片高度
						height: 1,
					});
					//添加定位点标注
					map.addLocationMarker(locationMarker);
					//设置定位图标位置
					setLocationMakerPosition(coord, 180);
					return locationMarker;
				};

				map.on('mapClickNode', function(event) {
					console.log('event', event)
					if(event.nodeType == fengmap.FMNodeType.MODEL && navi != undefined) {
						var modelLabel = event.label;
						var coord;
						// 如果拾取的模型没有Label对象，则使用模型中心点的坐标
						// 有则使用与模型对应的Label对象的坐标。
						if(!modelLabel) {
							coord = {
								x: event.mapCoord.x,
								y: event.mapCoord.y,
								groupID: event.groupID
							}
						} else {
							coord = {
								x: modelLabel.mapCoord.x,
								y: modelLabel.mapCoord.y,
								groupID: event.groupID
							};
						}
						navi.clearAll();
						navi.setStartPoint({
							x: mapCoord.x,
							y: mapCoord.y,
							height: 2,
							groupID: 1,
							url: 'image/start.png',
							size: 32
						});
						navi.setEndPoint({
							x: coord.x,
							y: coord.y,
							height: 2,
							groupID: coord.groupID,
							url: 'image/end.png',
							size: 32
						});
						navi.drawNaviLine();
					}

				})

				//开始导航
				$('#navigation').on('click', function() {
					coordIndex = 0;
					//导航开始
					changeCoord();
				});
				//定位真实导航坐标
				function changeCoord() {
					console.log('changeCoord')
					setTimeout(function() {
						if(coordIndex >= coordsData.length) {
							console.log('sss')
							return;
						}
						if(!navi) return;
						var coordItem = coordsData[coordIndex];
						console.log('coordItem', coordItem)

						navi.locate(coordItem);
						coordIndex++;
						changeCoord();
					}, 2000);
				}
				//楼层ID
				var lastGid = null;
			};
		</script>
	</body>

</html>